body {
  background: #1f1f1f;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  overflow: hidden;
}
.container{
  width: 100%;
  margin: auto;
  text-align: center;
}
.block {
  margin: 5vh 0;
}


.moving-message {
  opacity: 1;
  background-position: 0 50%;
  background-size: 200% 200%;
  background-image: linear-gradient(135deg, #003235, #003235 20%, #005872 0, #005872 40%, #4d9aa9 0, #4d9aa9 70%, #0d7286 0, #0d7286 89%, #00202a 0, #00202a);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradient-text 8s infinite;
  text-align: center;
  font-size: 4vw;
}

@keyframes gradient-text {
  0% {
    background-position: 0 50%;
    background-size: 100% 150%
  }

  25% {
    background-position: 100% 50%;
    background-size: 350% 150%
  }

  50% {
    background-position: 80% 50%;
    background-size: 150% 150%
  }

  75% {
    background-position: 100% 50%;
    background-size: 250% 150%
  }

  to {
    background-position: 0 50%;
    background-size: 100% 150%
  }
}

.moving-message3, .moving-message2 {
  display: inline-block;
  opacity: 1;
  text-align: center;
  font-size: 4vw;
  position: relative;
  overflow: hidden;
  color: transparent;
}
.moving-message2:before{
  content: attr(data-text);
  opacity: 1;
  color: white;
  text-align: left;
  font-size: 4vw;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  word-break: break-all;
  animation: gradient-text2 4s infinite;
}

@keyframes gradient-text2 {
  0% {
    width: 0%;
  }
  90%{
    width: 100%;
  }
  to{
    width: 100%;
  }
}

.moving-message3 {
  color: white;
}
.moving-message3:after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #1f1f1f;
  color: transparent;
  animation: gradient-text3 4s infinite;
}

@keyframes gradient-text3 {
  to {
    transform: translateX(100%);
  }
}

.holdable:hover, .holdable:hover:before, .holdable:hover:after{
  animation-play-state: paused !important;
}
